<template>
  <div>
    <!-- banner -->
    <div v-loading="pageLoading" class="game_page logistics_enter">
      <component
        :is="item"
        v-for="(item, index) in list"
        v-show="active === index"
        :key="index"
        :ref="item"
        :is-show="active === index"
        :has-next="hasNext"
        :has-prev="hasPrev"
        :to-order="toOrder"
        :form="form"
        @toNext="doNext"
        @toPrev="doPrev"
      />
      <div v-if="error" style="line-height: 400px" class="gl_noData_mockTable">
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import GameBanner from './components/gameBanner';
import Catering from '../logistics/components/cateringList';
import Hotel from '../logistics/components/hotelList';
import Reception from '../logistics/components/receptionList';
import Detailed from '../logistics/components/detailed';
import {
  api_GET_EventsManagementLogisticEntryLogisticSetings, // 获取培训后勤设置的模块信息
  api_GET_EventsManagementLogisticEntryUnfinishedLogisticEntry, // 根据培训获取是否有未完成的后勤报名
  api_POST_EventsManagementLogisticEntryLogisticEntry // 创建后勤报名
} from '@/extend/api/gameswaggerApi/app';
import {
} from '@/lib/form/game/swaggerForm';
export default {
  components: {
    GameBanner,
    Hotel,
    Reception,
    Catering,
    Detailed
  },
  data() {
    return {
      pageLoading: false,
      active: null, // 当前组件
      length: 0,
      hasPrev: false, // 上一步
      hasNext: true, // 下一步
      toOrder: false, // 去结算
      form: {}, // 后勤总订单
      error: false,
      list: [
        // 'Hotel',
        // 'Reception',
        // 'Catering',
        // 'Detailed'
      ]
    };
  },
  watch: {
    active(newVal, oldVal) {
      if ((newVal || newVal === 0) && newVal !== oldVal) {
        if (newVal === 0) {
          this.hasNext = this.length > 2;
        } else if (newVal === 1) {
          this.hasNext = this.length > 3;
        } else {
          this.hasNext = false;
        }
        this.hasPrev = newVal !== 0;
        this.toOrder = !this.hasNext;
      }
    },
    length(newVal, oldVal) {
      if ((newVal || newVal === 0) && newVal !== oldVal) {
        const active = this.active;
        if (active === 0) {
          this.hasNext = newVal > 2;
        } else if (active === 1) {
          this.hasNext = newVal > 3;
        } else {
          this.hasNext = false;
        }
        this.hasPrev = newVal !== 0;
        this.toOrder = !this.hasNext;
      }
    }
  },
  created() {
    this.getUnfinished();
    this.getLogisticSetings();
  },
  methods: {
    // 创建后勤报名
    createLogisticEntry() {
      var that = this;
      const form = {
        providerName: 'T', // 培训
        providerKey: this.$route.query.id
      };
      api_POST_EventsManagementLogisticEntryLogisticEntry(form).then(res => {
        that.form = res || {};
        that.active = 0;
      }, (error) => {
        that.$message({ type: 'error', message: error.error.message || '创建后勤报名失败！' });
      });
    },
    // 查询未完成的报名
    getUnfinished() {
      var that = this;
      const form = {
        providerKey: this.$route.query.id
      };
      api_GET_EventsManagementLogisticEntryUnfinishedLogisticEntry(form).then(res => {
        that.form = res || {};
        if (!that.form.id) {
          that.createLogisticEntry();
        } else {
          that.active = 0;
        }
      }, (error) => {
        that.$message({ type: 'error', message: error.error.message });
      });
    },
    // 获取该培训的后勤设置选项
    getLogisticSetings() {
      var that = this;
      that.pageLoading = true;
      const form = {
        providerKey: this.$route.query.id
      };
      api_GET_EventsManagementLogisticEntryLogisticSetings(form).then(res => {
        that.list = res || [];
        that.list.push('Detailed');
        that.length = that.list.length;
        that.pageLoading = false;
      }, (error) => {
        that.error = true;
        that.pageLoading = false;
        that.$message({ type: 'error', message: error.error.message });
      });
    },
    // 下一步
    doNext() {
      this.active = this.active + 1;
    },
    // 上一步
    doPrev() {
      this.active = this.active - 1;
    }
  }
};
</script>

<style lang="scss" scoped>
.game_page {
  position: relative;
  padding: 20px 20px 20px;
}
</style>

<style lang="scss">
.logistics_enter {
  .game_modal_header {
    position: relative;
    box-sizing: border-box;
    height: 32px;
    padding-left: 22px;
    margin-bottom: 24px;
    line-height: 32px;
    color: #353434;
    font-weight: bold;
    font-size: 18px;
    margin-left: 12px;
  }
  .game_modal_header::after {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 32px;
    background-color: #E02020;
    border-radius: 4px;
    content: "";
  }
  .main_box {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
    color: #353434;
    margin: 0 40px;
  }
  .content_border_b {
    border-bottom: 1px solid #eee;
  }
  .content_box {
    padding: 15px 28px;
    border-top: 1px solid #eee;
  }
  .hotelPhoto {
    width: 130px;
    height: 94px;
    margin-right: 12px;
  }
  .roomPhoto {
    width: 110px;
    height: 80px;
    margin-right: 12px;
  }
  .price {
    font-size: 20px;
    padding-top: 29px;
    color: #ff704a;
  }
  .order_table {
    padding: 20px 8px 34px 12px;
  }
  .order {
    background: #ff704a;
    border-radius: 100px;
    font-size: 14px;
    color: #ffffff;
    border: 1px solid #ff704a;
  }
  .prev {
    border: 1px solid #1890ff;
    background: #fff;
  }
  .no_order {
    border-radius: 100px;
    font-size: 14px;
  }
  .arrow_down{
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(90deg);
  }
  .arrow_right{
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(0deg);
  }
  .list {
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar{
      width: 6px;
      height: 6px;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
      background-color: transparent;
    }
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb{
      border-radius: 12px;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
      background-color: rgba(144, 147, 153, 0.3);
    }
  }
}
</style>
